<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="js/vue.js">
    </script>
</head>
<body>
    <div id="root">
        <h2>num1:{{num1}}</h2>
    <h2>num2:{{num2}}</h2>
    <div>
        <input v-model.number="num1"><!--双向绑定 -->
        +
        <input v-model.number="num2"><!--双向绑定 -->
        =
        {{num1+num2}}
    </div>
    <fieldset>
        <legend> v-once</legend>
        <p v-once> 有once不变{{name}}</p>
        <p> wuonce{{name}}</p>
        <!-- pre -->
         <p>v-pre:span</p>
    </fieldset>
    <ul>
        <li v-for="(i,index) in items" :key="item">{{i}}-index:{{index+1}}</li>
        <li v-for="items" :key="item">{{items}}</li>    
    </ul>
    <ul>
        <li v-for="(i,index) in products" :key="x">{{i}}-index:{{index+1}}</li>
        <p>--------------------------------------------</p>
        <li v-for="(i,index) in products" :key="x">{{i.name}}-index:{{index+1}}</li>
        <p>--------------------------------------------</p>
        <li v-for="(i,index) in products" :key="x">{{i.id}}-index:{{index+1}}</li>
        <p>--------------------------------------------</p>
        <li v-for="(i,index) in products" :key="x">{{i.type}}-index:{{index+1}}</li>
        <p>--------------------------------------------</p>
        <li v-for="(i,index) in products" :key="x">{{i.price}}-index:{{index+1}}</li>
        <p>--------------------------------------------</p>
        <li v-for="products" :key="x">{{products}}</li>    
    </ul>
    <div>
        <table border="1">
            <!-- 表头 -->
            <thead>
              <tr>
                <th>商品名称</th>
                <th>商品类型</th>
                <th>商品价格</th>
              </tr>
            </thead>
            <!-- 表格主体 -->
            <tbody>
              <tr v-for="(i,index) in products" :key="x">
                <td >{{i.name}} </td>
                <td >{{i.type}} </td>
                <td >{{i.price}} </td>  
                <tr>{{totalCount}}</tr>
              </tr>
              
            </tbody>
          </table>
          <div v-for="(value,name) in user">
            属性名是:{{name}}--属性值为： {{value}}
          </div>
    </div>
    
    </div>
    
    <script>
        const vm = new Vue({
            el:'#root',
            data:{
                // num1: 0, // 初始化 num1
                // num2: 0  // 初始化 num2
                items:[
                    '黑龙江省',
                    '哈尔滨市',
                    '科技大'
                ],
                products:[
                    {id:1,name:'可乐',type:'饮品',price:"3"},
                    {id:2,name:'好玩的',type:'品',price:"3"},
                    {id:3,name:'好喝',type:'品',price:"3"},
                    {id:4,name:'好吃的',type:'品',price:"3"},
                ],
                user: {
                    id:"2022024736",
                    name:"徐以民",
                    class:"软件22-3班"
                },
                computed:{
                    totalCount(){
                        let total = this.products.reduce((sum, item) => sum + (+item.商品价格), 0);
                        return total;
                    }
                }
            }
        });
        vm.$mount('#root');
        vm.products.push({id:5,name:'茄子',type:'吃的',price:'5元'});   
    </script>
    
</body>
</html>